<!doctype html>
<html>
  <head>
    <title>Multiple Form Demo</title>
    <link rel="icon" href="">
    <script type="text/javascript" src="./browser/form-utils.js" charset="utf-8"></script>
    <style media="screen">
      html {
        padding: 20px;
      }
      body {
        display: flex;
      }
      body > div {
        width: 30%;
      }
      label {
        display: block;
      }
      .hero {
        margin-bottom: 24px;
      }
      .github-corner svg {
        height: 80px;
        width: 80px;
        fill: #151513;
        color: #fff;
        position: absolute;
        top: 0;
        border: 0;
        right: 0
      }
      .github-corner:hover .octo-arm {
        animation: octocat-wave .56s ease-in-out
      }
      @keyframes octocat-wave {
        0%,to { transform: rotate(0) }
        20%,60% { transform: rotate(-25deg) }
        40%,80% { transform: rotate(10deg) }
      }
      @media (max-width: 720px) {
        .content, .content-left, iframe {
          flex-direction: column;
          max-width: 100%;
          min-width: 100%;
        }
        
        h1 { font-size: 24px; }
        #protected, #large-div div {
          font-size: 18px;
        }
        .github-corner svg {
          height: 60px;
          width: 60px;
        }
      }
      @media (max-width: 500px) {
        .github-corner:hover .octo-arm { animation:none }
        .github-corner .octo-arm { animation: octocat-wave .56s ease-in-out }
      }
    </style>
  </head>
  <body>
    <div>
      <h2 class="form-title">Form 1</h2>
      <form id="content-form" name="content-ebook-form" action="/content-thank-you/" method="POST">
        <input type="hidden" name="event" value="site:formConversion" />
        <input type="hidden" name="event_form_name" value="content-ebook-form" />
        <label>
          <span class="label">Email address</span>
          <input maxlength="80" name="email" size="20" type="email" required value='email@email.com' />
        </label>
        <label>
          <span class="label">CVC code</span>
          <input maxlength="80" name="cvc" size="20" type="num" required value='11221' />
        </label>
        <label>
          <span class="label">Credit card</span>
          <input maxlength="80" name="credit-card" size="20" type="num" required value='222' />
        </label>
        <label>
          <span class="label">secure</span>
          <input maxlength="80" name="secure code" size="20" type="num" required value='xyz' />
        </label>

        <div class="form-checkbox">
          <input type="checkbox" name="interested-in-sales"/>
          <label for="content-Form__talk-to-us">
            I’m interested in being contacted by sales
          </label>
        </div>

        <label>
          <span class="label">Your name</span>
          <input maxlength="40" name="attr_name" size="20" type="text" />
        </label>

        <label>
          <span class="label">Job Title</span>
          <input maxlength="40" name="attr_job" size="20" type="text" />
        </label>

        <label>
          <span class="label">Lol</span>
          <input maxlength="40" name="lolx" size="20" type="text" value='yolo'/>
        </label>

        <label>
          <span class="label">Organization</span>
          <input maxlength="40" name="attr_org" size="20" type="text" />
        </label>
        <button type="submit" name="submit" class="button">
          Submit Form
        </button>
      </form>
    </div>
    <div>
      <h2 class="form-title">Form 2</h2>
      <form id="content-form-two" name="two" action="/content-thank-you/" method="POST">

        <label>
          <span class="label">NAME</span>
          <input maxlength="40" name="name" size="20" type="text" />
        </label>

        <label>
          <span class="label">Title</span>
          <input maxlength="40" name="job" size="20" type="text" />
        </label>

        <label>
          <span class="label">hello</span>
          <input maxlength="40" name="hello" size="20" type="text" value='yolo'/>
        </label>

        <label>
          <span class="label">Filter this</span>
          <input maxlength="40" name="testing-filter" size="20" type="text" value='1111-2222-2222-1111'/>
        </label>

        <label>
          <span class="label">Organization</span>
          <input maxlength="40" name="org" size="20" type="text" />
        </label>
        <button type="submit" name="submit" class="button">
          Submit Form
        </button>
      </form>
    </div>
    <div>
      <h2 class="form-title">Form 3</h2>
      <form id="content-form-three" name="three" action="/content-thank-you/" method="POST">
        <table cellpadding="0" cellspacing="2">
        <tr>
          <td><input type="checkbox" name="how_hear[]" id="how_hear1" value="Website"  /></td>
          <td style="padding-left:3px"><label for="how_hear1">Website</label></td>
        </tr>
        <tr>
          <td><input type="checkbox" name="how_hear[]" id="how_hear2" value="TV Commercial" /></td>
          <td style="padding-left:3px"><label for="how_hear2">TV Commercial</label></td>
        </tr>
        <tr>
          <td><input type="checkbox" name="how_hear[]" id="how_hear3" value="Magazine Ad" /></td>
          <td style="padding-left:3px"><label for="how_hear3">Magazine Ad</label></td>
        </tr>
        <tr>
          <td><input type="checkbox" name="how_hear[]" id="how_hear4" value="Billboard" /></td>
          <td style="padding-left:3px"><label for="how_hear4">Billboard</label></td>
        </tr>
        <tr>
          <td><input type="checkbox" name="how_hear[]" id="how_hear5" value="Other" /></td>
          <td style="padding-left:3px"><label for="how_hear5">Other</label></td>
        </tr>
      </table>
        <label>
          <span class="label">Organization</span>
          <input maxlength="40" name="org" size="20" type="text" />
        </label>
        <button type="submit" name="submit" class="button">
          Submit Form 3
        </button>
      </form>
    </div>
    <script type="text/javascript">
    console.log('utilForms API', utilForms)
    
    window.document.forms[0].addEventListener('submit', () => {
      // window.location.href = 'https://google.com'
    }, false)

    utilForms.listen('all', {
      /* Turn on debug to disable submissions and see values */
      debug: true,
      /* Turn off sensitive values filter */
      disableFilter: false,
      /* Custom functionality handler for onSubmit */
      onSubmit: (event, data) => {
        console.log('submit form', event.target)
        console.log('submit data', JSON.stringify(data, null, 2))
      },
      onChange: (event, data, meta) => {
        console.log('change form', event.target)
        console.log('change data', JSON.stringify(data, null, 2))
        const allFormData = utilForms.getFormData(meta.form)
        console.log('allFormData', JSON.stringify(allFormData, null, 2))
        const filtered = utilForms.filterData(allFormData)
        console.log('filtered data', JSON.stringify(filtered, null, 2))
      },
      /* // Include only specific forms. Omit for all
      includeForms: [
        'form[id=content-form]',
        //  window.document.forms[1]
      ],
      /**/
      /* // Exclude forms by selectors
      excludeForms: [
        // 'form[name=two]',
        // window.document.forms[2]
      ],
      /**/
      //* // Exclude field by name or regex pattern of name attribute
      excludeFields: [
        /private/,
        'lol'
      ],
      /**/
      //* // Custom filter function
      filter: (fieldName, value) => {
        if (!value) return true
        // Exclude fieldName hello
        if (fieldName === 'hello') {
          return false
        }
        if (Array.isArray(value)) {
          return !value.some((v) => isCC(v))
        }
        console.log('value', value)
        // credit card number
        if (isCC(value)) {
          return false
        }
        return true
      }
      /**/
    })

    function isCC(value) {
      return value.match(/^\d{4}[- ]?\d{4}[- ]?\d{4}[- ]?\d{4}$/)
    }
    </script>
  </body>
</html>
